<template>
    <el-card style="max-width: 480px" :model="props">
        <template #header style="background-color: mediumblue;">
            <div class="card-header">
                <span style="font-size: 20px;">{{ props.title }}</span>
            </div>
        </template>
        <div style="border: 1px solid burlywood;background-color:antiquewhite; 
                width: 100%;padding:5px;height: 120px; border-radius:10px">
            <div style="font-size: 17px;">{{ props.content }}</div>
        </div>
        <template #footer>
            <div style="text-align: center; justify-content: center">
                <el-button type="primary" @click="submitResult(true)">同意</el-button>
                <el-button type="primary" @click="submitResult(false)" style="margin-left: 70px;">不同意</el-button>
            </div>
        </template>
    </el-card>
</template>
<script setup lang='ts'>
import { reactive } from 'vue'
import { showErrorMsg, showSuccessMsg } from '@/api/common';
import { submitInviteResult } from '@/api/albumCollection/albumCollection';
interface InviteFamilyResultRequest {
    id: number | null,
    agree: boolean,
}
interface NoDataResponse {
    status: number,
    data: string,
    msg: string,
}
const props = withDefaults(defineProps<{
    id: number,
    title: string,
    content: string,
    remark: string,
}>(), {

})
const inviteFamilyResultRequest = reactive<InviteFamilyResultRequest>({
    id: null,
    agree: true,
})
const submitResult = (res: boolean) => {
    inviteFamilyResultRequest.id = props.id;
    inviteFamilyResultRequest.agree = res;
    submitInviteResult(inviteFamilyResultRequest).then((response: NoDataResponse) => {
        if (response.status != 200) {
            showErrorMsg(response.msg)
        } else {
            if (res) {
                showSuccessMsg('你已成功加入家庭组，重新登录，试试家庭相册共享功能吧！')
            } else {
                showSuccessMsg('你已拒绝此邀请！')
            }
        }
    })
}
</script>
<style scoped></style>